<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义图标</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css"/>
    <script src="../leaflet/leaflet.js"></script>
    <style>

    </style>

</head>
<body>
<div id="mapid" style="width: 800px; height: 600px;"></div>
<script>

    // 设置地图坐标，以及地图缩放等级
    var map = L.map('mapid').setView([43.81248, 87.60052], 15);

    // 加载高德地图接口
    L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?' + 'lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {subdomains: ["1", "2", "3", "4"]}).addTo(map);

    // 在地图上创建一个自定义图标
    var LeafIcon = L.Icon.extend({
        options: {
            shadowUrl: '../images/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    });
    // 根据上面的图标创建3个图标。
    var greenIcon = new LeafIcon({iconUrl: '../images/leaf-green.png'}),
            redIcon = new LeafIcon({iconUrl: '../images/leaf-red.png'}),
            orangeIcon = new LeafIcon({iconUrl: '../images/leaf-orange.png'});
    // 创建一个遍历的调用方法
    L.icon = function (options) {
        return new L.Icon(options);
    };
    // 在地图上标记三个图标
    L.marker([43.81248, 87.60552], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
    L.marker([43.81248, 87.60052], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
    L.marker([43.81248, 87.59552], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");

    // 设置点击事件
    /*var popup = L.popup();
    function onMapClick(e) {
        popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
    }
    map.on('click', onMapClick);*/

</script>
</body>
</html>
